<template>
  <div>
    <el-row>
      <view-top></view-top>
    </el-row>
    <div class="book-container">
      <el-container>
        <el-header height="200px">
          <el-row class="title-row indent-20">
            <el-col :span="4" class="title">
              <faicon icon="book" size="lg"></faicon>
              <span class="title-text">小说详情</span>
            </el-col>
          </el-row>
          <el-row>
            <book-info v-bind="book" :intro-limit="100"></book-info>
          </el-row>
        </el-header>
        <el-header height="80px">
          <el-row>
            <div class="button-row">
              <el-col :span="6">
                <!-- <router-link
                  :to="firstChapterLink()"
                  tag="el-button"
                  class="el-button--danger"
                >
                  </router-link
                > -->
                <el-button type="danger" @click="jumpToReader(1)"
                  ><i class="el-icon-reading" /> 开始阅读</el-button
                >
                <el-button
                  type="warning"
                  @click="addOrDeToCollect"
                  :icon="added? 'el-icon-star-on':'el-icon-star-off' "
                  >{{added?'已加入书架':'加入书架'}}</el-button
                >
              </el-col>
              <el-col :span="3" class="stat-col">
                <div class="stat-title">阅读人数</div>
                <div class="stat-value">{{ book.watchNum }}</div>
              </el-col>
              <el-col :span="3" class="stat-col">
                <div class="stat-title">收藏数</div>
                <div class="stat-value">{{ book.collectNum }}</div>
              </el-col>
              <el-col :span="3" class="stat-col">
                <div class="stat-title">字数</div>
                <div class="stat-value">{{ book.total }}万字</div>
              </el-col>
              <el-col :span="3" class="stat-col">
                <div class="stat-title">最近更新</div>
                <div class="stat-value">{{ book.updated }}</div>
              </el-col>
              <el-col :span="6" class="stat-col">
                <div class="stat-title">最新章节</div>
                <div class="stat-value">{{ book.lastChapter }}</div>
              </el-col>
            </div>
          </el-row>
        </el-header>
        <h3 style="text-align: left; padding-left: 100px">
          <span>目录</span><span class="directory-dot"></span
          >{{ chapters.length }}
        </h3>
        <hr class="result-divider" />
        <el-row>
          <el-col :span="24">
            <div class="toc-container">
              <el-col
                :span="8"
                v-for="(chapter, index) in chapters"
                :key="index"
              >
                <span
                  class="search-title"
                  @mouseenter="titleIndex = index"
                  @mouseleave="titleIndex = -1"
                  @click="jumpToReader(index + 1)"
                  :class="{ active: index === titleIndex }"
                  >{{ chapter.title }}</span
                >
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-container>
    </div>
  </div>
</template>


<script>
import BookInfo from "../BookInfo.vue";
import toc from "./TOC.vue";
import ViewTop from "../ViewTop.vue";
import { toHumanString } from "../../utils/util/math";
import { formatDate } from "../../utils/util/time";
export default {
  components: {
    ViewTop,
    BookInfo,
    toc,
  },
  filters: {
    
  },
  data() {
    return {
      book: {
        id: 0,
        title: "",
        author: "",
        cover: "",
        total:0,
        lastChapter:"",
        watchNum:0,
        collectNum:0,
        updated:"",
        introduction:"",
        status:"",
        hot:0,
        boyOrGirl:""
      },
      titleIndex: -1,
      added:false,
      chapters: {
      type: Array, // 指定 是一个数组类型
      default: () => [] // 指定默认值为空数组
    }
    };
  },
  methods: {
    addCollect(){
      var that=this
      this.axios({
        method:"post",
        url:`/user/bookShelf/insert/${that.book.id}`,
        
        }).then((res)=>{
          if(res.data.code==1){
            console.log(res.data)
            that.added=true
            this.searchBook()
          }
        }).catch((err)=>{
          console.log(err)
        })
    },
    deCollect(){
      var that=this
      this.axios({
        method:"delete",
        url:`/user/bookShelf/delete/${that.book.id}`,

        }).then((res)=>{
          if(res.data.code==1){
            console.log(res.data)
            that.added=false
            this.searchBook()
          }
        }).catch((err)=>{
          console.log(err)
        })
    },
    searchBook(){
      this.axios({
        method: "get",
        url: "/user/novel/list?id="+this.book.id,
      }).then((res)=>{
        console.log(res.data.data)
        this.book=res.data.data[0]
        }).catch((err)=>{
          console.log(err)
      })
    },
    addOrDeToCollect(){
      if(this.added){
        this.deCollect()
      }else{
        this.addCollect()
      }
      
    },
    jumpToReader(cid){
      if (this.book && this.chapters.length > 0) {
        this.$router.push(
          {
            path: "/reader",
            query: {
              chapters: JSON.stringify(this.chapters),
              book: JSON.stringify(this.book),
              cid: JSON.stringify(cid),
            }
          },
        )
        
      } else {
        // 处理 book 或 chapters 未定义的情况
        console.error("Book or chapters data is not available.");
        return null; // 或者返回一个默认的路由对象
      }
    }
  },
  mounted() {
    
    this.book = JSON.parse(this.$route.query.book);
  
    // console.log(this.$route.query.book)
    
    let book=this.book
    var that=this
    console.log(book)
    this.axios({
      method: "get",
      url: "/user/chapter/directory?id=" + book.id,
    }).then((res) => {
      that.chapters = res.data.data;
      console.log(that.chapters)
    }).catch((err) => {
      console.log(err);
    });
    this.axios({
      method: "get",
      url:"/user/bookShelf/list?id="+book.id
    }).then((res)=>{
      if(res.data.data.length>0){
        that.added=true
      }
    }).catch((err)=>{
      console.log(err)
    })
  },

};
</script>

<style lang="stylus" scoped>
.search-title.active {
  color: red; /* 点击时字体颜色变为红色 */
  cursor: pointer;
}

.title-row {
  border-bottom: 1px solid #eeeeee;
  padding: 0 0 10px 0;
}

.indent-20 {
  margin: 0 20px;
}

.title {
  text-align: left;

  svg {
    color: #755928;
  }

  .title-text {
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #755928;
  }
}

.book-container {
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 20px 0;
}

.button-row {
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;

  .stat-col {
    border-left: 1px solid #eeee;
    padding-left: 5px;
  }

  .stat-title {
    font-size: 14px;
  }

  .stat-value {
    margin-top: 2px;
    color: red;
    font-size: 14px;
  }
}

.collect {
  color: red;
}

.read {
  color: red;
}

.result-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.directory-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 0 10px;
  background-color: rgba(0, 0, 0, 0.85);
  position: relative;
  top: -4px;
}

.el-col.el-col-8 {
  /* margin-left: 0; */
  text-align: left;
  /* position: relative; */
  margin-top: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  color: #000;
}

.toc-container {
  padding-left: 100px;
}
</style>

